Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Preserve aspect ratio of images #242

Merged
merged 19 commits into from
Oct 17, 2024
Merged

Preserve aspect ratio of images #242

merged 19 commits into from
Oct 17, 2024

Conversation

rodarima
Copy link
Member

@rodarima rodarima commented Aug 12, 2024

A common problem for images is that only one dimension is given {height,width}
or that a range is set by {min,max}-{height,width}. Previously, the original
size of the image was used to compute the aspect ratio and then fill the missing
dimension.

But the procedure requires more steps to fulfill all constraints. This PR tries
to cover all posible cases of constrained images while preserving the aspect
ratio. When is not posible, the aspect ratio is distorted to fit the size
constraints.

TODO

  • Test several combinations of padding and margins to check we continue to
    compute the image size correctly. -> Tested manually, but we may want to add more render tests to the suite.
  • Test floating images and cases where they might not have a parent.
  • Check the problem with gigantic images is not introduced by this PR.

How it looks Before:

image

After:

image

dw/widget.cc Show resolved Hide resolved
Tests several combinations of size contraints on images so we can check
if the aspect ratio is kept or not.
Prevents errors by one pixel
When posible, change the image size so the aspect ratio is always
preserved. This is only posible when one or both dimensions have some
room to play. When both dimensions are not fixed, a naive algorithm
tries to satisfy all {min,max}-{width,height} and aspect ratio
constraints, but it may fail. In that case, the aspect ratio is not
preserved.

Fixes the HTML tests img-aspect-ratio and img-max-bounds.
Prevents reducing the available width of a body with width:auto and
min-width:100px to 100px.

The Widget::calcFinalWidth() method is also heavily documented, so we
can understand precisely what it does.
When the initial width is -1, the contrainsts of min-width and max-width
are not applied. If we set the viewport width after calcFinalWidth() it
may exceed max-width. It is guaranteed to return a value different from
-1 when the initial width is positive.
When correcting a requisition, percent values were not being computed
which prevents the min-height or max-height values to be taken into
account.
When a widget calls the parent to correct its own requisition, let the
child widget perform adjustments on the requisition. This allows images
to control the height when the parent changes the width, so the image
can preserve its own aspect ratio.
For cases where the available height is being computed and the CSS
style has the height to auto, there available height is infinite. Don't
return the viewport unless forceValue is set.
Images should preserve their own aspect ratio, which is determined by
the image buffer size, also known as the intrinsic size. Currently, when
a child requests a requisition to be corrected by correctRequisition(),
only the size was adjusted, ignoring the aspect ratio.

The new Widget ratio variable holds the desired aspect ratio for the
widget, and will only be taken into account when non-zero. In that case,
then correcting the requisition, a naive algorithm tries to first
increase the length of the small size to fill the preferred aspect
ratio. In the case that it is not enough, the larger size is then
decreased to fit the aspect ratio. And if that doesn't work either, the
aspect ratio is not enforced and the widget will be distorted.

There are special cases for correctRequisition() depending if the parent
exists or not. The same approach is taken for both cases, but using the
viewport size instead of the parent size.
When CSS min-{width,height} > max-{width,height} set the
max-{width,heigh} to the maximum value min-{width,height}.
The aspect ratio is now preserved by Widget::correctRequisition(), so we
don't need to do more steps after the call.
@rodarima
Copy link
Member Author

Testing with float images improves when compared with the previous behavior, but continues to show problems when computing the parent requisition. I think we can leave this for a future PR, to avoid stalling this one forever.

The requisition box includes the margin, padding and border. To compute
the aspect ratio of the image we need to remove them to get the content
box. Once the adjustment is done, we add the borders again.
@rodarima rodarima merged commit 572b934 into master Oct 17, 2024
22 checks passed
@rodarima rodarima deleted the fix-image-ratio branch October 21, 2024 17:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant